<template>
  <view>
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content">楼层管理</block>
      <block slot="right">
        <image
          @click="showFun"
          class="nav-right-image"
          src="@/static/images/nav_opt.png"
        ></image>
      </block>
    </cu-custom>
    <view
      class="page-content"
      :style="{ height: this.ContentArea + 'px', paddingTop: '30rpx' }"
    >
      <view class="page-search">
        <view class="search">
          <view class="search-left" @click="searchBtn">
            <image src="@/static/images/search.png" mode="aspectFit" />
          </view>
          <input
            class="search-center"
            type="text"
            placeholder="输入楼层名称进行搜索"
            placeholder-class="search-placeholder"
            v-model="searchValue"
            @blur="searchBtn"
          />
        </view>
      </view>
      <view class="page-content-main">
        <scroll-view
          class="list"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          :refresher-background="'#F9F9F9'"
          @scrolltolower="onEndReached"
        >
          <uni-swipe-action right-options="rightOptions">
            <uni-swipe-action-item
              v-for="(item, index) in dataList"
              :key="index"
            >
              <view
                style="
                  position: relative;
                  height: 92px;
                  background-color: #f9f9f9;
                  padding: 20rpx;
                  border-radius: 15px;
                  display: flex;
                  margin-top: 15px;
                "
              >
                <view style="margin: 5px 0 0 15px">
                  <view>
                    <text style="font-size: 18px; font-weight: bold">
                      {{ buildingObj.buildingName }} &nbsp;&nbsp;{{
                        item.floor
                      }}
                    </text>
                  </view>
                  <view
                    style="
                      border-radius: 40rpx 40rpx 40rpx 40rpx;
                      background-color: rgba(52, 167, 89, 0.14);
                      min-width: 140px;
                      padding: 1px 10px;
                      margin-top: 15px;
                    "
                  >
                    <text style="color: #34a759">
                      创建人：{{ item.createBy_dictText }}
                    </text>
                  </view>
                </view>
              </view>
              <template v-slot:right>
                <view
                  style="
                    position: relative;
                    margin-top: 30rpx;
                    margin-left: 20rpx;
                    background-color: #f9f9f9;
                    border-radius: 15px;
                    padding: 10rpx 30rpx;
                  "
                >
                  <view
                    @click="edit(item)"
                    style="
                      margin-top: 0rpx;
                      border-radius: 30rpx;
                      background-color: rgba(255, 173, 4, 1);
                      padding: 8rpx 30rpx;
                      color: #ffffff;
                      font-size: 20rpx;
                    "
                  >
                    编辑
                  </view>
                  <view
                    @click="toDetails(item)"
                    style="
                      border-radius: 30rpx;
                      background-color: rgba(69, 145, 254, 1);
                      padding: 8rpx 30rpx;
                      margin-top: 10rpx;
                      margin-bottom: 15rpx;
                      color: #ffffff;
                      font-size: 20rpx;
                    "
                  >
                    详情
                  </view>
                  <view
                    @click="toDelete(item.id)"
                    style="
                      border-radius: 30rpx;
                      background-color: rgba(220, 31, 31, 1);
                      padding: 8rpx 30rpx;
                      margin-top: -5rpx;
                      margin-bottom: 15rpx;
                      color: #ffffff;
                      font-size: 20rpx;
                    "
                  >
                    删除
                  </view>
                </view>
              </template>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </scroll-view>
        <view class="fun-wrap" v-show="isShowFun" @click="hideFun">
          <view class="fun-box" :style="{ top: this.CustomBar + 'px' }">
            <view class="fun-item" @click.stop="gotoAdd">
              <image class="fun-icon" src="@/static/images/addIcon.png" />
              <text class="fun-text">新增</text>
            </view>
          </view>
        </view>
        <uni-popup ref="addWindow" background-color="#fff" :mask-click="false">
          <view
            style="
              background-color: #ffffff;
              padding: 11rpx 30rpx;
              width: 580rpx;
              height: 700rpx;
              border-radius: 42rpx;
            "
          >
            <view style="margin-top: 28rpx; margin-left: 15rpx">
              <text class="submit-text">{{ windowFlag }}</text>
            </view>
            <view
              class="cu-form-group"
              style="
                background-color: rgba(243, 243, 243, 1);
                border-radius: 15px;
                margin-top: 40rpx;
              "
            >
              <text>楼层：</text>
              <input
                v-model="floorName"
                placeholder="请输入楼层名称"
                name="input"
                style="font-size: 25rpx"
              />
            </view>
            <view
              class="cu-form-group"
              style="
                background-color: rgba(243, 243, 243, 1);
                border-radius: 15px;
                margin-top: 40rpx;
              "
            >
              <text>排序值：</text>
              <input
                v-model="sortOrder"
                placeholder="值越小越靠前"
                name="input"
                style="font-size: 25rpx"
              />
            </view>
            <button
              style="
                background-color: rgba(217, 217, 217, 1);
                color: rgba(86, 85, 85, 1);
                margin-top: 30rpx;
                padding: 2rpx 85rpx;
                display: inline-block;
              "
              @click="rejectCancel"
            >
              取消
            </button>
            <button
              style="
                background-color: rgba(69, 145, 254, 1);
                color: rgba(255, 255, 255, 1);
                margin-left: 34rpx;
                display: inline-block;
                padding: 2rpx 85rpx;
              "
              @click="rejectSure"
            >
              确定
            </button>
          </view>
        </uni-popup>
      </view>
      <uni-popup ref="deletePopup" background-color="#fff" :mask-click="false">
        <view
          style="
            text-align: center;
            background-color: #ffffff;
            padding: 11rpx;
            width: 580rpx;
            height: 470rpx;
            border-radius: 42rpx;
          "
        >
          <view class="submit-item">
            <image class="submit-icon" src="@/static/images/deleteIcon.png" />
          </view>
          <view style="margin-top: 28rpx">
            <text class="submit-text">确定删除该列表吗</text>
          </view>
          <br />
          <view style="display: flex">
            <button
              @click="sureDelete"
              style="
                border-radius: 20rpx;
                background-color: red;
                color: rgba(255, 255, 255, 1);
                width: 230rpx;
                margin-top: 50rpx;
              "
            >
              确定
            </button>
            <button
              @click="cancelDelete"
              style="
                border-radius: 20rpx;
                background-color: gray;
                color: rgba(255, 255, 255, 1);
                width: 230rpx;
                margin-top: 50rpx;
              "
            >
              取消
            </button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      dataList: [],
      isShowFun: false,
      refreshing: true,
      pageSize: 10,
      pageNo: 1,
      total: 0,
      floorName: "",
      sortOrder: "",
      windowFlag: "",
      editId: "",
      deleteIds: "",
      buildingObj: {},
    };
  },
  watch: {},
  mounted() {
    this.getList(1);
  },
  created() {},
  onLoad(option) {
    if (option.buildingObj) {
      this.buildingObj = JSON.parse(option.buildingObj);
    }
  },
  computed: {},
  methods: {
    getList(pageNo) {
      let params = {
        company: uni.getStorageSync("Auth_Company_Id"),
        floor: this.searchValue,
        buildingId: this.buildingObj.id,
        pageNo,
        pageSize: this.pageSize,
      };
      this.$http
        .get("/crm_dormitory_floor/crmDormitoryFloor/list", {
          params: params,
        })
        .then((res) => {
          if (res.data.success) {
            let { records, size, current, total } = res.data.result || {};
            if (current === 1) {
              this.dataList = records;
            } else {
              this.dataList = this.dataList.concat(records);
            }
            this.pageNo = current;
            this.total = total;
            this.pageSize = size;
          }
        })
        .finally(() => {
          this.refreshing = false;
        });
    },
    onRefresh() {
      this.refreshing = true;
      this.getList(1);
    },
    onEndReached() {
      if (this.pageNo * this.pageSize < this.total) {
        this.getList(this.pageNo + 1);
      }
    },
    clearSearch() {
      this.searchValue = "";
    },
    searchBtn() {
      this.getList(1);
    },
    showFun() {
      this.isShowFun = true;
    },
    hideFun() {
      this.isShowFun = false;
    },
    gotoAdd() {
      this.windowFlag = "新增";
      this.isShowFun = false;
      this.$refs.addWindow.open("center");
      this.floorName = "";
      this.sortOrder = "";
    },
    edit(item) {
      this.editId = item.id;
      this.windowFlag = "编辑";
      this.$refs.addWindow.open("center");
      this.floorName = item.floor;
      this.sortOrder = item.sortOrder;
    },
    toDetails(item) {
      uni.navigateTo({
        url:
          "/pages/dormitoryManagement/roomManagement/index?floorObj=" +
          JSON.stringify(item) +
          "&buildingObj=" +
          JSON.stringify(this.buildingObj),
      });
    },
    toDelete(id) {
      this.deleteIds = id;
      this.$refs.deletePopup.open("center");
    },
    sureDelete() {
      this.$http
        .delete(
          "/crm_dormitory_floor/crmDormitoryFloor/delete?id=" + this.deleteIds
        )
        .then((res) => {
          if (res.data.success) {
            this.$tip.toast("删除成功");
            this.getList();
            this.$refs.deletePopup.close();
          } else {
            this.$tip.toast("删除失败");
          }
        })
        .catch(() => {
          this.$tip.loaded();
          this.$tip.toast("删除失败");
        });
    },
    cancelDelete() {
      this.$refs.deletePopup.close();
    },
    rejectSure() {
      if (this.windowFlag == "新增") {
        this.$http
          .post("/crm_dormitory_floor/crmDormitoryFloor/add", {
            sortOrder: this.sortOrder,
            floor: this.floorName,
            buildingId: this.buildingObj.id,
          })
          .then((res) => {
            if (res.data.success) {
              this.getList();
              this.$refs.addWindow.close();
            } else {
              this.$tip.toast(res.data.message);
            }
          })
          .catch(() => {
            this.$tip.loaded();
            this.$tip.toast("提交失败");
          });
      } else {
        this.$http
          .put("/crm_dormitory_floor/crmDormitoryFloor/edit", {
            id: this.editId,
            sortOrder: this.sortOrder,
            floor: this.floorName,
            buildingId: this.buildingObj.id,
          })
          .then((res) => {
            if (res.data.success) {
              this.getList();
              this.$refs.addWindow.close();
            } else {
              this.$tip.toast(res.data.message);
            }
          })
          .catch(() => {
            this.$tip.loaded();
            this.$tip.toast("提交失败");
          });
      }
    },
    rejectCancel() {
      this.$refs.addWindow.close();
    },
  },
};
</script>

<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}

.blackList {
  height: 100%;
  overflow: hidden;
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 680rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.filter-btn {
  width: 40rpx;
  height: 40rpx;
  margin-right: 42rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-content-main {
  height: calc(100% - 12rpx - 86rpx);
  border-top-left-radius: 64rpx;
  border-top-right-radius: 64rpx;
  padding: 26rpx 34rpx 0 34rpx;
}

.select-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.select {
  width: 160rpx;
  height: 74rpx;
  border-radius: 60rpx;
  background-color: #4591fe;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  position: relative;

  .select-value {
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
    margin-right: 18rpx;
  }

  .select-icon {
    width: 22rpx;
    height: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20rpx;
    top: 25rpx;
  }
}

.list {
  height: calc(100% - 20rpx);
}

.list-item {
  border-radius: 28rpx;
  background-color: #ffffff;
  padding: 26rpx 24rpx 28rpx 20rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 26rpx;
  position: relative;

  .list-item-leftCenter {
    display: flex;
    flex-direction: row;
  }

  .list-item-left {
    width: 86rpx;
    height: 86rpx;
    margin-right: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-center {
    .list-item-row {
      display: flex;
      flex-direction: row;
      margin-bottom: 20rpx;

      .list-item-name {
        color: #101317;
        font-size: 32rpx;
        margin-right: 16rpx;
      }

      .list-item-sex {
        width: 106rpx;
        height: 42rpx;
        border-top-right-radius: 40rpx;
        border-bottom-right-radius: 40rpx;
        border-bottom-left-radius: 20rpx;
        background-color: rgba(234, 171, 78, 0.35);
        line-height: 42rpx;
        text-align: center;
        color: rgba(255, 173, 4, 1);
        font-size: 24rpx;
      }

      .list-item-row-icon {
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .list-item-row-title,
      .list-item-row-value {
        font-size: 24rpx;
        font-weight: 400;
        color: #101317;
        line-height: 38rpx;
      }
    }
  }

  .list-item-btn {
    width: 36rpx;
    height: 36rpx;
    margin-top: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .list-item-tab {
    width: 132rpx;
    height: 56rpx;
    text-align: center;
    line-height: 56rpx;
    background-color: rgba(69, 145, 254, 0.4);
    position: absolute;
    top: 0;
    right: 0;
    border-top-right-radius: 26rpx;
    border-bottom-left-radius: 20rpx;
  }

  .list-item-tab-text {
    font-size: 26rpx;
    color: rgba(69, 145, 254, 1);
  }
}

.nav-right-image {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15px;
}

.fun-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 3, 3, 0.28);
  z-index: 10000;
}

.fun-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 556rpx;
  height: 444rpx;
  border-top-left-radius: 42rpx;
  border-bottom-left-radius: 42rpx;
  border-bottom-right-radius: 42rpx;
  position: absolute;
  right: 74rpx;
  background-color: #ffffff;
  padding-top: 35rpx;
}

.fun-item {
  width: 185rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 44rpx;
}

.fun-icon {
  width: 92rpx;
  height: 92rpx;
  margin-bottom: 22rpx;
}

.cu-form-group {
  background-color: transparent;
}

::v-deep {
  .cu-form-group uni-picker .picker {
    color: #ffffff;
  }

  .cu-form-group uni-picker::after {
    opacity: 0;
  }
}

.textView {
  margin-left: 25px;
  font-size: 10px;
  margin-top: 5px;
}

.listText {
  width: 148rpx;
  height: 24rpx;
  font-size: 20rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 24rpx;
}

.submit-icon {
  width: 118rpx;
  height: 118rpx;
  margin-top: 58rpx;
}

.mySelect {
  position: relative;
  background-color: #4591fe;
  border-radius: 60rpx;
  height: 74rpx;

  .mySelect-value {
    position: inherit;
    margin-left: 10rpx;
    margin-right: -25rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #ffffff;
  }

  .mySelect-icon {
    width: 22rpx;
    height: 22rpx;
    position: absolute;
    top: 30%;
    right: 18%;
  }
}
</style>
